<template>
  <div class="main">
    <navTop></navTop>
    <div class="breadBox">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
        <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contentMain">
      <div class="searchlist">
        <router-link to="/examoverview" active-class="hover">考试概览</router-link>
        <router-link to="/studentmanage" active-class="hover">考生管理</router-link>
        <router-link to="/teachermanage" active-class="hover">评阅教师管理</router-link>
        <router-link to="/scorerelease" active-class="hover">成绩管理</router-link>
      </div>
      <div class="overviewcontent">
        <div class="overvcontentTop">
          <div>
            <h3 style="font-weight:bold">{{ scorelist.name }}</h3>
            <div class="examInfo">
              <b><i>时间：</i>{{ scorelist.startTime | formatDate }}</b>
              <b>
                <i>年级：</i>
                <em v-if="scorelist.studentRange.length === 0">--</em>
                <em v-for="item in scorelist.studentRange" v-else>{{ item.gradeName ? item.gradeName : '--' }}</em>
              </b>
              <b><i>考试模式：</i>{{ scorelist.optionalName }}</b>
              <b><i>上传方式：</i>本地识别后上传</b>
              <b><i>评阅方式：</i>{{ scorelist.markHubType == 1 ? '全校阅卷' : scorelist.markHubType == 2 ? '分班阅卷' :
                scorelist.markHubType == 3 ? '导入成绩' : scorelist.markHubType == 4 ? '先批后扫' : '线上考试' }}</b>
            </div>
          </div>
          <span @click="addExam(scorelist)">编辑考试</span>
        </div>
        <div class="tableContent">
          <table cellspacing="0" cellpadding="0" style="width:100%">
            <tr>
              <th>科目ID</th>
              <th>考试科目</th>
              <th>成绩状态</th>
              <!-- <th>学校数量</th> -->
              <th>班级数量</th>
              <th>学生数量</th>
              <th>缺考数量</th>
              <th>平均分</th>
              <th>最高分</th>
              <th>最低分</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in scorelist.examCourses">
              <td>{{ item.coursesId }}</td>
              <td v-if="scorelist.studentRange.length == 0">{{ item.coursesName }}</td>
              <td v-else>{{ item.coursesName }}<i>{{ scorelist.studentRange[0].gradeName }}</i></td>
              <td><span
                  :class="item.scorePublishStatus == 1 ? 'red' : item.scorePublishStatus == 2 ? 'green' : 'gray'">{{
                    item.scorePublishStatus == 1 ? '未发布' : item.scorePublishStatus == 2 ? '未发布' : '已发布' }}</span>
              </td>
              <!-- <td>{{item.schoolNumber}}</td> -->
              <td>{{ item.classCount }}</td>
              <td>{{ item.studentTotal }}</td>
              <td>{{ item.missExamTotal }}</td>
              <td>{{ item.avgScore | toFixed }}</td>
              <td>{{ item.highestScore }}</td>
              <td>{{ item.lowestScore }}</td>
              <td>
                <div class="fixedbuttons">
                  <b @click="publishresultstab(item.id)" v-if="item.scorePublishStatus == 2"><img
                      src="../../assets/image/school/pj.png" style="width:12px;margin-right:5px;" />发布成绩</b>
                  <b v-else style="color:#999;cursor: default;"><img src="../../assets/image/school/pj1.png"
                      style="width:12px;margin-right:5px;" />发布成绩</b>
                  <!-- <b class="red" @click="cancelfbtab"><img src="../../assets/image/school/cancelfb.jpg" style="width:12px;margin-right:5px;" />取消发布</b> -->
                  <b @click="fumodifyscore(item.id)"><img src="../../assets/image/school/pj.png"
                      style="width:12px;margin-right:5px;" />修改成绩</b>
                  <b class="lookfx" v-if="item.scorePublishStatus == 3" @click="lookalasiy"><img
                      src="../../assets/image/school/lookfx.jpg" style="width:12px;margin-right:5px;" />查看分析</b>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <examEdite v-if="addExamIshow" @addexamclick="addexamclick" :examobj="examobj" :addexamtype="addexamtype">
    </examEdite>
    <!-- 发布成绩 -->
    <div class="addExamMain" v-if="publishresultsIshow">
      <div class="addExamContent">
        <h3>发布成绩</h3>
        <p>设置查询角色与查询权限</p>
        <div class="checklist">
          <el-switch v-model="value1">
          </el-switch>
          限制角色
          <el-checkbox-group v-model="rolelist">
            <el-checkbox label="管理员"></el-checkbox>
            <el-checkbox label="班主任"></el-checkbox>
            <el-checkbox label="授课老师"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="checklist">
          <el-switch v-model="value1">
          </el-switch>
          教师查询
          <el-checkbox-group v-model="teacherlist">
            <el-checkbox label="显示排名"></el-checkbox>
            <el-checkbox label="显示分数"></el-checkbox>
            <el-checkbox label="授课选项查询"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="checklist">
          <el-switch v-model="value1">
          </el-switch>
          考生查询
          <el-checkbox-group v-model="studentlist">
            <el-checkbox label="显示排名"></el-checkbox>
            <el-checkbox label="显示分数"></el-checkbox>
          </el-checkbox-group>
        </div>
        <p>生成分析内容</p>
        <div class="checklist">
          <el-switch v-model="value1">
          </el-switch>
          生成分析
          <el-checkbox-group v-model="fenxilist">
            <el-checkbox label="数据表格"></el-checkbox>
            <el-checkbox label="数据报告"></el-checkbox>
            <el-checkbox label="评阅留痕"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="groupbutton">
          <el-button type="primary" @click="publishresults">发布成绩</el-button>
          <el-button type="primary" @click="publishresultsgoback">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 取消发布 -->
    <div class="addExamMain" v-if="canclefbishow">
      <div class="addExamContent">
        <h3>取消发布成绩</h3>
        <b class="attentionred">除拥有成绩管理权限的用户外，其他用户不能查询成绩和分析数据</b>
        <div class="attentioncancel">
          <span>取消授权密码：</span>
          <el-input placeholder="请输入管理员密码"></el-input>
        </div>
        <div class="groupbutton1">
          <el-button type="primary" @click="publishresultsfb">取消发布</el-button>
          <el-button type="primary" @click="publishresultsgobackfb">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navTop from "../../components/school/head.vue"
import examEdite from '../../components/school/exditexam.vue'
import { get, post, del, put, analsisget } from '../../request/api.js'
export default {
  data () {
    return {
      addExamIshow: false,
      scorelist: [],
      rolelist: [],
      teacherlist: [],
      studentlist: [],
      fenxilist: [],
      publishresultsIshow: false,
      canclefbishow: false,
      examlist: {},
      examobj: {},
      examobjcontent: {},
      fbishow: 1,
      examInfo: {}
    }
  },
  mounted () {
    this.examobjcontent = JSON.parse(sessionStorage.getItem('examContent'))
    this.examInfo = JSON.parse(sessionStorage.getItem('examInfo'))
    this.grademanagement(this.examobjcontent.id)
  },
  methods: {
    //查看分析
    lookalasiy () {
      get('/exampaper/classlist', { examId: this.examobjcontent.id })
        .then(res => {
          if (res.code == 200) {
            let title = sessionStorage.getItem('examName') + '-' + this.examInfo.coursesName + '-' + res.data[0].name
            analsisget(`/api/class/get/${this.examobjcontent.id}`, { classId: res.data[0].id })
              .then(anysis => {
                //console.info(anysis)
                if (anysis.code == 200) {
                  if (anysis.data.status == 2) {
                    // window.open(`https://ra.bsedu.com?examId=${this.examobjcontent.id}&classId=${res.data[0].id}&title=${title}`)
                    window.open(`${this.$linkUrlra}?examId=${this.examobjcontent.id}&classId=${res.data[0].id}&title=${title}`)
                  } else {
                    this.$message.error('当前分析未加载完成')
                  }
                } else {
                  this.$message.error(res.message);
                }
              })
            // window.location.href = 'https://ra.bslmedu.com' + '?examId=' + this.examobjcontent.id + '&classId=' + res.data[0].id + '&title=' + title;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          his.$message.error(error.message);
        })
    },
    grademanagement (id) {
      get('/score/details', { examId: id })
        .then(res => {
          if (res.code == 200) {
            this.scorelist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    // 新建考试
    addExam (obj) {
      this.examobj = obj
      this.addExamIshow = true
    },
    addexamclick (data) {
      if (data == '返回') {
        this.addExamIshow = false
      } else {
        this.grademanagement(this.examobjcontent.id)
        this.addExamIshow = data
      }
    },
    // 跳转不同页面
    routerlink (link) {
      this.$router.push(link)
    },
    publishresults () {
      this.publishresultsIshow = false
    },
    publishresultsgoback () {
      this.publishresultsIshow = false
    },
    publishresultstab (id) {
      // this.publishresultsIshow = true
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append('courseId', id);
      post('/score/publishscore', formData, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(res => {
          //console.info(res)
          if (res.code == 200) {
            this.fbishow = 2
            this.$message.success('发布成功')
            this.grademanagement(this.examobjcontent.id)
          } else {
            this.$message.error(res.message)
          }
        })
    },
    publishresultsfb () {
      this.canclefbishow = false
    },
    publishresultsgobackfb () {
      this.canclefbishow = false
    },
    cancelfbtab () {
      this.canclefbishow = true
    },
    fumodifyscore (id) {
      this.$router.push('/modifygrades?examid=' + id)
    }
  },
  components: { navTop, examEdite }
}
</script>

<style scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #F4F7FD;
  ;
  overflow-x: hidden;
  overflow-y: auto;
}

/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
.contentMain {
  width: auto;
  padding: 0 40px;
  margin: 0 auto;
  padding-bottom: 70px;
}

.breadBox {
  height: 32px;
  background: #fff;
  line-height: 32px;
  margin-top: 2px
}

.el-breadcrumb {
  width: auto;
  padding: 0 40px;
  margin: 0 auto;
  line-height: 30px;
  font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #B3B8C2
}

.searchlist {
  box-sizing: border-box;
  width: auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  height: 54px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 0 24px;
  align-items: center;
  margin-top: 14px;
}

.searchlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  width: 100px;
  text-align: center;
  position: relative;
  line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
  color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
  content: '';
  width: 24px;
  height: 4px;
  background: #295CFF;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.overviewcontent {
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  width: auto;
  padding: 0 40px;
  margin: 20px auto;
}

.examInfo {
  display: flex;
  align-items: center;
}

.examInfo b {
  font-weight: normal;
  font-size: 14px;
  color: #333;
  position: relative;
  padding-right: 14px;
  margin-right: 14px;
}

.examInfo b i {
  font-style: normal;
  color: #8E96A4
}

.examInfo b::after {
  content: '';
  width: 1px;
  height: 8px;
  background: #DEE1E7;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.examInfo b:last-child::after {
  content: '';
  width: 1px;
  height: 8px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.overvcontentTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
}

.overvcontentTop h3 {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
}

.overvcontentTop span {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.tableContent {
  padding: 0 24px 30px;
  border-radius: 10px;
}

.tableContent table {
  border-radius: 10px;
  border: 1px solid rgba(216, 228, 240, 0.5);
}

.tableContent table tr th {
  font-size: 14px;
  font-weight: normal;
  background: #E8F0FA;
  height: 42px;
}

.tableContent table tr th:first-child {
  border-radius: 8px 0 0 0;
}

.tableContent table tr th:last-child {
  border-radius: 0 8px 0 0;
}

.tableContent table tr td {
  height: 42px;
  text-align: center;
  font-size: 14px;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.tableContent table tr td:last-child {
  border-right: none;
}

.tableContent table tr td i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #999
}

.tableContent table tr td em {
  display: block;
}

.tableContent table tr td span {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 62px;
  height: 22px;
  border-radius: 6px;
}

.tableContent table tr td span.green {
  background: #EEEEEE;
  color: #5E5E5E;
}

.tableContent table tr td span.red {
  background: rgba(236, 85, 90, 0.06);
  border: 1px solid rgba(236, 85, 90, 0.5);
  color: rgba(236, 85, 90, 1);
}

.tableContent table tr td span.gray {
  background: rgba(40, 143, 65, 0.06);
  border: 1px solid rgba(40, 143, 65, 0.5);
  color: rgba(40, 143, 65, 1);
}

.tableContent table tr {
  background: #FAFAFB
}

.tableContent table tr:nth-child(2n) {
  background: #fff
}

.fixedbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixedbuttons b {
  color: #295CFF;
  font-size: 14px;
  margin: 0 10px;
  cursor: pointer;
}

.fixedbuttons b.lookfx {
  color: #288F41
}

.fixedbuttons b.red {
  color: #EC555A
}

.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 100;
}

.addExamContent {
  width: 584px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  padding: 30px;
}

.addExamContent h3 {
  font-size: 18px;
}

.checklist {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 14px;
  color: #5B6371;
  margin-top: 15px;
}

.el-switch {
  margin-right: 10px;
}

.el-checkbox-group {
  margin-left: 10px;
}

.addExamContent p {
  font-size: 14px;
  padding: 24px 0 0px 50px;
  color: #5B6371;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: center;
}

.groupbutton>>>.el-button {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
}

.groupbutton>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 24px;
}

.attentionred {
  display: block;
  font-size: 14px;
  color: #EC555A;
  padding: 10px 0;
}

.attentioncancel {
  display: flex;
  align-items: center;
}

.attentioncancel span {
  font-size: 14px;
  width: 140px;
  color: #557292
}

.groupbutton1 {
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: left;
}

.groupbutton1>>>.el-button {
  width: 124px;
  height: 34px;
  background: #EC555A;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
  border: none;
}

.groupbutton1>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 24px;
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
  font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold
}
</style>